import React from 'react';
import {NavBar,Result, Icon, WhiteSpace,ListView} from "antd-mobile"
import GetCity from '../../components/GetCity/GetCity';
const myImg = src => <img src={src} style={{width:"60px",height:"60px"}} alt="" />;
class Collect extends React.Component {
    state={
        housecoll:[],// 房源
        iscoll:0,// 是否有收藏的
    }
    render() { 
        let {housecoll,iscoll}=this.state
        return <div>
          <NavBar
            mode="dark"
            leftContent={<GetCity/>}
            onLeftClick={() =>{
                this.props.history.push("/city")
            }}
            >收藏</NavBar>
           {
              iscoll?
              this.state.housecoll.map((v,k)=>{
                return <div 
                onClick={()=>{// 到详情
                    this.props.history.push("/det/"+v.houseCode)
                    // console.log(6666);
                }}
                style={{
                    display:"flex",
                    height:"130px",
                    boxSizing:"border-box",
                    padding:"10px",
                    background:"white",
                    justifyContent:"space-between",
                    alignContent:"center",
                    borderBottom:"1px solid #dedada"
                }}>
                    <div style={{
                        width:"130px",
                        height:"130px"
                    }}>
                        <img style={{borderRadius:"5px"}} width="100%" height="100px" src={v.houseImg}/>
                    </div>
                    <div style={{
                        width:"250px",
                        boxSizing:"border-box",
                        padding:"5px"
                    }}>
                       <h4 style={{
                           margin:0
                       }}>
                           {v.title.length>14?v.title.substr(0,14)+'...':v.title}
                       </h4>
                       <p style={{
                           display:"flex",
                           flexWrap:"wrap",
                          
                       }}>
                           {
                                       v.tags.map((i,j)=>{
                                           return <span style={{
                                               background:j%2==0?"pink":'skyblue',
                                               borderRadius:"5px",
                                               margin:"2px",
                                               padding:"2px",
                                               color:"white"
                                           }}>
                                               {i}
                                           </span>
                                       })
                                   }
                       </p>
                        <p style={{
                            color:"red"
                        }}>
                            ￥{v.price}
                        </p>
                    </div>
                </div>
            })
              :
              
            <Result
            img={myImg('https://gw.alipayobjects.com/zos/rmsportal/HWuSTipkjJRfTWekgTUG.svg')}
            title="等待收藏"
            message="你还没有收藏房源"
           />
           }
        </div>;
    }

    getColl(){
        let housecoll=localStorage.getItem("housecoll")
        if(housecoll){
            housecoll=JSON.parse(housecoll)// 转回来
           this.setState({
               housecoll,
               iscoll:housecoll.length==0?0:1
           })
           console.log(this.state.iscoll);
        }else{
            this.setState({
                iscoll:0
            })
        }

    }

    componentDidMount(){
        this.getColl()
    }
}
 
export default Collect;